<div class="list-pf-item provisioned-service" ng-class="{ active: row.expanded }">
  <div class="list-pf-container" ng-click="row.toggleExpand($event)">
    <div class="list-pf-chevron">
      <div ng-include src=" 'views/overview/_list-row-chevron.html' " class="list-pf-content"></div>
    </div>
    <div class="list-pf-content">
      <div class="list-pf-name">
        <h3>
          <a ng-href="{{row.apiObject | navigateResourceURL}}" ng-bind-html="row.displayName | highlightKeywords : row.state.filterKeywords"></a>
          <div ng-bind-html="row.apiObject.metadata.name | highlightKeywords : row.state.filterKeywords" class="list-row-longname"></div>
        </h3>
        <div class="status-icons" ng-if="!row.expanded" ng-init="tooltipID = 'instance-status-tooltip-' + $id">
          <notification-icon alerts="row.notifications"></notification-icon>
          <div ng-switch="row.instanceStatus" class="instance-status-notification" id="{{tooltipID}}">
            <!-- Set the tooltip container so we can add write CSS rules that target the message. -->
            <span ng-switch-when="failed"
                  dynamic-content="{{row.getFailedTooltipText()}}"
                  data-toggle="tooltip"
                  data-trigger="hover"
                  data-container="#{{tooltipID}}">
              <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
              Error
            </span>
            <span ng-switch-when="deleted" class="notification-icon-count">
              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
              Marked for Deletion
            </span>
            <span ng-switch-when="pending" class="notification-icon-count">
              <span class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
              <span>Pending</span>
            </span>
          </div>
        </div>
      </div>
      <div class="list-pf-details" ng-if="!row.expanded">
        <span ng-if="!row.bindings.length
                    && row.isBindable
                    && (row.serviceBindingsVersion | canI : 'create')"
              class="hidden-xs hidden-sm">
          <a href="" ng-click="row.showOverlayPanel('bindService', {target: row.apiObject})">
            <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
            Create Binding
          </a>
        </span>
        <div ng-if="row.bindings.length" class="hidden-xs hidden-sm">
          <span class="component-label">Bindings</span>
          <p ng-if="firstBinding = row.bindings[0]" class="bindings">
            <span ng-if="application = row.state.applicationsByBinding[firstBinding.metadata.name][0]">
              {{application.metadata.name}}
            </span>
            <span ng-if="!application">
              {{firstBinding.metadata.name}}
            </span>
            <span ng-if="row.bindings.length > 1">
              and
              <a
                ng-if="row.bindings.length > 1"
                ng-click="row.toggleExpand($event, true)">
                {{row.bindings.length -1}} other<span ng-if="row.bindings.length > 2">s</span></a>
            </span>
          </p>
        </div>
        <div
          class="hidden-xs"
          ng-if="(!row.instanceStatus || row.instanceStatus === 'ready') && row.apiObject.status.dashboardURL">
          <a ng-href="{{row.apiObject.status.dashboardURL}}" target="_blank">
            Dashboard <i class="fa fa-external-link small" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="list-pf-actions">
      <div class="dropdown-kebab-pf" uib-dropdown ng-if="row.actionsDropdownVisible()">
        <button uib-dropdown-toggle class="btn btn-link dropdown-toggle">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
          <li role="menuitem" ng-if="row.isBindable && (row.serviceBindingsVersion | canI : 'create')">
            <a href="" ng-click="row.showOverlayPanel('bindService', {target: row.apiObject})">
              Create Binding
            </a>
          </li>
          <li role="menuitem" ng-if="row.deleteableBindings.length && (row.serviceBindingsVersion | canI : 'delete')">
            <a href="" ng-click="row.showOverlayPanel('unbindService', {target: row.apiObject})">Delete Binding</a>
          </li>
          <li role="menuitem">
            <a href="" ng-click="row.deprovision()" role="button" ng-if="row.serviceInstancesVersion | canI : 'delete'">Delete</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div
    class="list-pf-expansion collapse"
    ng-if="row.expanded"
    ng-class="{ in: row.expanded }">
    <div class="list-pf-container">
      <alerts alerts="row.notifications"></alerts>
      <div ng-switch="row.instanceStatus">
        <div ng-switch-when="deleted" class="row">
          <div class="col-sm-12">
            <div class="alert word-break alert-warning">
              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
              <span class="sr-only">warning</span>
              <span class="strong">The service was marked for deletion.</span>
            </div>
          </div>
        </div>
        <div ng-switch-when="failed" class="row">
          <div class="col-sm-12">
            <div class="alert word-break alert-danger">
              <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
              <span class="sr-only">error</span>
              <span class="strong">The service failed.</span>
              <span class="instance-status-message">
                <truncate-long-text
                  content="row.apiObject | serviceInstanceFailedMessage"
                  expandable="true"
                  limit="265"
                  newline-limit="4"></truncate-long-text>
              </span>
              <div ng-if="row.serviceInstancesVersion | canI : 'delete'">
                <a href="" ng-click="row.deprovision()">Delete This Service</a>
              </div>
            </div>
          </div>
        </div>
        <div ng-switch-when="pending" class="row">
          <div class="col-sm-12">
            <div class="alert word-break alert-info">
              <span class="pficon pficon-info" aria-hidden="true"></span>
              <span class="sr-only">info</span>
              <span class="strong">The service is not yet ready.</span>
              <span class="instance-status-message">
                <truncate-long-text
                  content="row.apiObject | serviceInstanceReadyMessage"
                  expandable="true"
                  limit="265"
                  newline-limit="4"></truncate-long-text>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="expanded-section no-margin">
        <div class="row">
          <div class="col-sm-12" ng-if="row.serviceClass.spec.description">
            <p class="service-description"><truncate-long-text
                limit="500"
                content="row.serviceClass.spec.description"
                use-word-boundary="true"
                expandable="true"
                linkify="true">
              </truncate-long-text></p>
            <div ng-if="row.serviceClass.spec.externalMetadata.documentationUrl || row.serviceClass.spec.externalMetadata.supportUrl">
              <a ng-if="row.serviceClass.spec.externalMetadata.documentationUrl" ng-href="{{row.serviceClass.spec.externalMetadata.documentationUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
              <a ng-if="row.serviceClass.spec.externalMetadata.supportUrl" ng-href="{{row.serviceClass.spec.externalMetadata.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="expanded-section">
        <div ng-if="row.isBindable || (row.bindings | size)">
          <div class="component-label section-label">Bindings</div>
          <service-instance-bindings
            is-overview="true"
            project="row.state.project"
            bindings="row.bindings"
            service-instance="row.apiObject"
            service-class="row.serviceClass"
            service-plan="row.servicePlan">
          </service-instance-bindings>
        </div>
      </div>
    </div>
  </div>
</div>
<overlay-panel show-panel="row.overlay.panelVisible" handle-close="row.closeOverlayPanel">
  <div ng-if="row.overlay.panelName === 'bindService'">
    <bind-service target="row.overlay.state.target"
                  project="row.state.project"
                  on-close="row.closeOverlayPanel"></bind-service>
  </div>
  <div ng-if="row.overlay.panelName === 'unbindService'">
    <unbind-service
      target="row.overlay.state.target"
      bindings="row.deleteableBindings"
      applications-by-binding="row.state.applicationsByBinding"
      on-close="row.closeOverlayPanel"
      service-class="row.serviceClass"></unbind-service>
  </div>
</overlay-panel>
